<template>
	<view>
		<view class="uni-header" style="margin-top: 5px;">
			<view class="uni-group">
				<button @click="navigateTo('./add')" size="mini" plain="true" type="primary">新增
				</button>
			</view>
		</view>
		<view class="uni-container">
			<uni-table ref="table" :loading="loading" class="table-pc" emptyText="暂无数据" border stripe>
				<uni-tr>
					<uni-th width="50" align="center">排序</uni-th>
					<uni-th width="50" align="center">名称</uni-th>
					<uni-th align="center">URL</uni-th>
					<uni-th width="50" align="center">启用</uni-th>
					<uni-th align="center">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item,index) in tableData" :key="index">
					<uni-td align="center">{{ item.orderNum }}</uni-td>
					<uni-td>{{ item.name }}</uni-td>
					<uni-td>{{ item.path }}</uni-td>
					<uni-td align="center" :class="{'menu-disable':item.status}">
						{{ item.status ? '启用' : '禁用' }}
					</uni-td>
					<uni-td align="center">
						<view class="uni-group" style="justify-content: left;">
							<button @click="navigateTo('./edit?id='+item.id, false)" class="uni-button" size="mini"
								type="primary">编辑
							</button>
							<button @click="confirmDelete(item)" class="uni-button" size="mini" type="warn">删除
							</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<!-- #ifndef H5 -->
		<fix-window />
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		noPagingList,
		removeById
	} from "@/api/eye/appMenu"

	export default {
		data() {
			return {
				tableData: [],
				selectedIndexs: [], //批量选中的项
				loading: false,
				menus: [],
				selectedPluginMenuIndexs: []
			}
		},
		onLoad() {
			console.log('onLoad')
			this.noPagingList()
		},
		onShow() {},
		methods: {
			noPagingList() {
				noPagingList().then(res => {
					console.log(res)
					this.tableData = res.rows
				})
			},
			loadData(clear = true) {
				this.noPagingList()
			},
			navigateTo(url, clear) { // clear 表示刷新列表时是否清除当前页码，true 表示刷新并回到列表第 1 页，默认为 true
				uni.navigateTo({
					url,
					events: {
						refreshData: () => {
							console.log('刷新页面')
							this.loadData(clear)
						}
					}
				})
			},
			confirmDelete(menu) {
				let ids = menu.id
				uni.showModal({
					title: '提示',
					content: '是否删除该菜单？',
					success: (res) => {
						if (!res.confirm) {
							return
						}
						removeById(ids).then(res => {
							console.log(res)
							this.noPagingList()
						})
					}
				})
			}
		}
	}
</script>
<style>
	/* #ifndef H5 */
	page {
		padding-top: 85px;
	}

	/* #endif */
	.menu-disable {
		color: red;
	}

	.menu-badge {
		position: absolute;
		top: 0;
		right: 5px;
	}
</style>
